<template>
  <div class="category-wrap">
    <div class="tit-wrap flex-xbt">
      <h2>手机专区</h2>
      <router-link  to="/mall/goods/more" class="flex-yc">
        更多
        <el-icon><ArrowRight /></el-icon>
      </router-link>
    </div>
    <div class="category-container">
      <gooditem/>
    </div>
  </div>
</template>

<script setup lang="ts">
import gooditem from '@/pages/mall/components/gooditem.vue'
</script>

<style scoped lang="scss">
.category-wrap {
  padding-top: 60px;
}

.tit-wrap {
  align-items: flex-end;
  padding-bottom: 20px;

  h2 {
    font-size: 24px;
    color: #021429;
  }

  .flex-yc {
    font-size: 14px;
    color: #888;
  }
}

.category-container {
  width: 100%;

  .flex-xbt {
    .category-item {
      width: 310px;
      background-color: #fff;

      &:hover {
        box-shadow: rgb(0 0 0 / 10%) 0 0 36px;
      }

      > img {
        display: block;
        width: 310px;
        height: 220px;
        background-color: #d9d9d9;
      }

      .goods-font-wrap {
        padding: 10px;

        .tit {
          font-size: 14px;
          line-height: 16px;
          color: #5f6085;

          > b {
            flex-shrink: 0;
            padding: 0 2px;
            font-size: 11px;
            color: #fff;
            background-color: $primary;
            border-radius: 2px;
          }
        }

        .tip-wrap {
          margin: 9px 0 17px;

          span {
            padding: 2px 4px;
            font-size: 12px;
            color: $danger;
            border: 1px solid $danger;
            border-radius: 2px;

            & + span {
              margin-left: 4px;
            }
          }
        }

        .price-wrap {
          font-size: 18px;
          color: $danger;

          span {
            align-items: flex-end;
            color: $danger;
          }

          b {
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
